<template>
  <div v-if="selfType" class="wl-address">
    <!--   国内外选择 -->
    <el-select
      v-model="homeAbroad_act"
      :filterable="filterable"
      :clearable="clearable"
      :disabled="disabled"
      :size="size"
      value-key="value"
      placeholder="国内国外"
      @change="homeAbroadChange"
    >
      <el-option v-for="item in homeAbroad" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>
    <!--   海外国家 -->
    <el-select
      v-if="homeAbroad_act"
      v-model="nation_act"
      :filterable="filterable"
      :clearable="clearable"
      :disabled="disabled"
      :size="size"
      value-key="code"
      placeholder="国家"
      class="nation-outselect"
      @change="nationChange"
    >
      <el-option v-for="item in nation" :key="item.code" :label="item.name" :value="item" />
    </el-select>
    <el-select
      v-if="!homeAbroad_act"
      v-model="province_act"
      :filterable="filterable"
      :clearable="clearable"
      :disabled="disabled"
      :size="size"
      value-key="code"
      placeholder="省份"
      class="nation-inselect"
      @change="provinceChange"
    >
      <el-option v-for="item in provinces" :key="item.code" :label="item.name" :value="item" />
    </el-select>
    <el-select
      v-if="!homeAbroad_act"
      v-model="city_act"
      :filterable="filterable"
      :clearable="clearable"
      :disabled="disabled"
      :size="size"
      value-key="code"
      placeholder="城市"
      class="nation-inselect"
      @change="citysChange"
    >
      <el-option v-for="item in citys" :key="item.code" :label="item.name" :value="item" />
    </el-select>
    <el-select
      v-if="!homeAbroad_act"
      v-model="county_act"
      :filterable="filterable"
      :clearable="clearable"
      :disabled="disabled"
      :size="size"
      value-key="code"
      placeholder="区/县"
      class="nation-inselect"
      @change="countysChange"
    >
      <el-option v-for="item in countys" :key="item.code" :label="item.name" :value="item" />
    </el-select>
  </div>
  <el-cascader
    v-else
    v-model="cascader_val"
    popper-class="wl-address-cascader"
    :size="size"
    :disabled="disabled"
    :options="provinces"
    :clearable="clearable"
    :separator="separator"
    :props="cascader_props"
    :filterable="filterable"
    :placeholder="placeholder"
    :show-all-levels="showAllLevels"
    @change="getCascaderVal"
    @active-item-change="handleItemChange"
  />
</template>
<script>
import { getProvince, getCity, getCounty, getNation } from './address.js' // 导入获取省市县

export default {
  name: 'WlAddress',
  props: {
    // 输入框尺寸
    size: {
      type: String,
      default: ''
    },
    // 地址类型 default默认 cascader级联选择器
    type: {
      type: String,
      default: 'default'
    },
    // 默认数据
    address: {
      type: String,
      default: ''
    },
    // 是否可搜索
    filterable: {
      type: Boolean,
      default: true
    },
    // 是否可清空选项
    clearable: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: '请选择地址'
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false
    },
    // cascader模式选项分隔符
    separator: String,
    // cascader模式选项分隔符
    showAllLevels: {
      type: Boolean,
      default: true
    },
    isForeign: Boolean,
    nationCode: String,
    advancedSearch: Boolean
  },
  data() {
    return {
      homeAbroad: [{ label: '国外', value: true }, { label: '国内', value: false }], // 国内国外
      nation: [], // 国家
      provinces: [], // 省份
      citys: [], // 市
      countys: [], // 县
      homeAbroad_act: null, // 国内外
      nation_act: {// 国家
        code: '',
        name: ''
      }, // 当前国
      province_act: {
        code: '',
        name: ''
      }, // 当前省
      city_act: {
        code: '',
        name: ''
      }, // 当前省
      county_act: {
        code: '',
        name: ''
      }, // 当前省
      cascader_props: {
        label: 'name',
        value: 'code',
        children: 'children'
      },
      cascader_val: [] // 级联选中值
    }
  },
  computed: {
    selfType() {
      return this.type === 'default'
    }
  },
  watch: {
    address(val) {
      // 省市区置空
      if (val === '') {
        this.province_act = ''
        this.city_act = ''
        this.county_act = ''
        this.nation_act = ''
        if (this.province_act === '') {
          this.citys = [] // 市
          this.countys = [] // 县
        }
        if (this.city_act === '') {
          this.countys = [] // 县
        }
        this.homeAbroad_act = null
        this.nation = []
        /* 3.8高级搜索置空*/
        if (this.advancedSearch) {
          this.provinces = []
        }
      }
      this.analysisDefaultAddress()
    },
    /* 国内外赋值*/
    isForeign: {
      handler: function(val) {
        if (val != null) {
          this.homeAbroad_act = this.isForeign
        }
      },
      immediate: true
    },
    /* 高级搜索国内置空*/
    advancedSearch: {
      handler: function(val) {
        if (val) this.homeAbroad_act = null
      },
      immediate: true
    },
    /* 获取nation_act*/
    nationCode: {
      handler: function(val) {
        if (val !== '') {
          if (this.isForeign) {
            this.nation = getNation()
            this.nation_act = this.nation.find(item => item.code === val)
          }
        } else {
          this.nation_act = {
            code: '',
            name: ''
          }
          this.homeAbroad_act = false
          this.provinces = getProvince()
        }
      },
      immediate: true
    }
  },
  created() {
    this.analysisDefaultAddress()
    this.provinces = getProvince()
    /* 3.8高级搜索置空*/
    if (this.advancedSearch) {
      this.provinces = []
    }
  },
  methods: {
    // 级联选择动态获取下级
    handleItemChange(val) {
      const [p_code, c_code] = val
      if (c_code) {
        const act_city = this.citys.find(item => item.code === c_code)
        if (act_city.children.length > 0) return
        this.countys = getCounty(act_city)
        act_city.children = this.countys
      } else {
        const act_province = this.provinces.find(item => item.code === p_code)
        if (act_province.children.length > 0) return
        this.citys = getCity(act_province, true)
        act_province.children = this.citys
      }
    },
    // 选择完毕数据组装
    getCascaderVal(val) {
      if (val.length === 0) {
        this.$emit('update:address', '')
        this.$emit('update:isForeign', false)
        this.$emit('update:foreign', false)
        return
      }
      const [pro, cit, con] = val
      this.province_act = this.provinces.find(item => item.code === pro)
      if (con) {
        this.city_act = this.province_act.children.find(
          item => item.code === cit
        )
        this.county_act = this.city_act.children.find(
          item => item.code === con
        )
      } else {
        this.city_act = this.province_act
        this.county_act = this.city_act.children.find(
          item => item.code === cit
        )
      }
      const { code: pro_code, name: pro_name } = this.province_act
      const { code: cit_code, name: cit_name } = this.city_act
      const { code: cou_code, name: cou_name } = this.county_act
      const string_address = JSON.stringify([
        { code: pro_code, name: pro_name },
        { code: cit_code, name: cit_name },
        { code: cou_code, name: cou_name }
      ])
      this.$emit('update:isForeign', this.homeAbroad_act)
      this.$emit('update:foreign', this.homeAbroad_act)
      this.$emit('update:address', string_address)
    },
    /* 国内外更改*/
    homeAbroadChange(val) {
      let string_address = ''
      if (val) {
        /* 置空校验*/
        this.nation_act = {
          code: '',
          name: ''
        }
        this.nation = getNation()
        this.$emit('update:isForeign', true)
        this.$emit('update:foreign', true)
        string_address = JSON.stringify([
          this.nation_act
        ])
      } if (!val) {
        this.citys = []
        this.countys = []
        this.city_act = {
          code: '',
          name: ''
        }
        this.county_act = {
          code: '',
          name: ''
        }
        this.province_act = {
          code: '',
          name: ''
        }
        this.provinces = getProvince()
        this.$emit('update:isForeign', false)
        this.$emit('update:foreign', false)
        string_address = JSON.stringify([
          this.province_act,
          this.city_act,
          this.county_act
        ])
      }
      this.$emit('update:address', string_address)
    },
    /* 海外国家选择*/
    nationChange(val) {
      const string_address = JSON.stringify([
        this.nation_act
      ])
      this.$emit('update:address', string_address)
    },
    // 省份更改
    provinceChange(val) {
      this.city_act = {
        code: '',
        name: ''
      }
      this.county_act = {
        code: '',
        name: ''
      }
      this.countys = []
      this.citys = getCity(val)
      const string_address = JSON.stringify([
        this.province_act,
        this.city_act,
        this.county_act
      ])
      this.$emit('update:address', string_address)
    },
    // 城市更改
    citysChange(val) {
      this.county_act = {
        code: '',
        name: ''
      }
      this.countys = getCounty(val)
      if (this.countys.length === 0) {
        this.county_act = {
          code: '0',
          name: '0'
        }
      }
      const string_address = JSON.stringify([
        this.province_act,
        this.city_act,
        this.county_act
      ])
      this.$emit('update:address', string_address)
    },
    // 县更改
    countysChange(val) {
      const string_address = JSON.stringify([
        this.province_act,
        this.city_act,
        this.county_act
      ])
      this.$emit('update:address', string_address)
    },
    // 解析默认地址
    analysisDefaultAddress() {
      if (!this.address) return
      let address = ''
      try {
        address = JSON.parse(this.address) || []
      } catch (error) {
        console.log('地址信息不合规范:' + error)
      }
      const data_format = address instanceof Array
      if (!data_format) return
      if (this.type === 'default') {
        if (address.length !== 1) {
          [
            this.province_act = {},
            this.city_act = {},
            this.county_act = {}
          ] = address
          if (this.province_act.code) {
            this.citys = getCity(this.province_act)
          }
          if (this.city_act.code) {
            this.countys = getCounty(this.city_act)
          }
        } else { // 初始化国家
          [
            this.nation_act = {}
          ] = address
          if (this.nation_act.code) {
            this.nation = getNation()
          }
        }
      } else {
        const [pro, cit, con] = address
        this.cascader_val =
          pro.code !== cit.code
            ? address.map(item => item.code)
            : [pro.code, con.code]
        this.cascaderData(this.cascader_val)
      }
    },
    // 处理默认地址时级联数据
    cascaderData(val) {
      const [p_code, c_code, n_code] = val
      const act_province = this.provinces.find(item => item.code === p_code)
      this.citys = getCity(act_province, true)
      act_province.children = this.citys
      if (n_code) {
        const act_city = this.citys.find(item => item.code === c_code)
        this.countys = getCounty(act_city)
        act_city.children = this.countys
      }
    }
    // 级联筛选函数
    /* filterMethod(node, key) {
      console.log(node);
      console.log(key);
    } */
  }
}
</script>
<style lang="css" scoped>
.wl-address {
  display: flex;
  justify-content: space-between;
}
.wl-address .el-select {
  flex: auto;
}
.wl-address .nation-inselect{
  margin-left: 10px;
}
.wl-address .nation-outselect{
  margin-left: 63px;
  margin-right: 51px;
}
.wl-address-cascader .el-scrollbar {
  max-height: 400px;
}
.wl-address-cascader .el-scrollbar > .el-scrollbar__wrap {
  overflow-x: hidden;
}
</style>
